<script lang="ts">
import { defineComponent, ref, type PropType } from "vue";
import { types_api } from "@/package/guider/api/new_guide_certification";

import EditMenuTitle from "./edit-menu-title.vue";
import FormCheckbox from "@/components/form/checkbox.vue";

export default defineComponent({
  components: { EditMenuTitle, FormCheckbox },
  props: {
    modelValue: { type: Array as PropType<Number[]>, required: true },
  },
  setup(props, ctx) {
    types_api().then((resp) => (typeList.value = resp.identity_type2));

    const typeList = ref<any[]>([]);
    const typeClick = (id: number) => {
      const index = props.modelValue.indexOf(id);
      index === -1
        ? props.modelValue.push(id)
        : props.modelValue.splice(index, 1);
    };

    return { typeList, typeClick };
  },
});
</script>

<template>
  <view class="identity-picker">
    <view class="identity-picker-title">
      <EditMenuTitle title="认证身份" required desc="(可复选)" />
    </view>
    <view class="identity-picker-wrapper">
      <view
        class="identity-picker-item"
        v-for="i of typeList"
        :key="i.id"
        @click="typeClick(i.id)"
      >
        <FormCheckbox :modelValue="modelValue.includes(i.id)" />
        <view class="identity-picker-text">{{ i.name }}</view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.identity-picker {
  margin-bottom: 34rpx;

  .identity-picker-title {
    padding-left: 30rpx;
    margin-bottom: 14rpx;
  }

  .identity-picker-item {
    display: flex;
    align-items: center;
    height: 90rpx;
    padding: 0 30rpx;
  }

  .identity-picker-text {
    flex-grow: 1;
    min-width: 0;
    margin-left: 20rpx;
    font-size: 30rpx;
    color: #333333;
    line-height: 42rpx;
  }
}
</style>